<template>
    <div class="part">
      <div class="main">
        <img src="static/img/solution_05.jpg" alt="" width="100%">
        <router-link to="">
          <img src="static/img/solution_8.jpg" alt="" width="100%">
        </router-link>
        <div class="system">
          <div class="item" v-for="item in itemList" :key="item.id" @mouseenter="enter(item)" @mouseleave="leave(item)">
            <router-link to="">
            <img :src="item.img" alt="" width="100%" :class="[item.active? 'hide': 'show']">
            <img :src="item.imgMouse" alt="" width="100%" :class="[item.active? 'show': 'hide']">
          </router-link>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Part',
  data () {
    return {
      itemList: [{id: 1, img: 'static/img/item1.jpg', imgMouse: 'static/img/itemc1.jpg'},
        {id: 2, img: 'static/img/item2.jpg', imgMouse: 'static/img/itemc2.jpg'},
        {id: 3, img: 'static/img/item3.jpg', imgMouse: 'static/img/itemc2.jpg'}],
      active: false
    }
  },
  methods: {
    enter (item) {
      this.$set(item, 'active', true)
    },
    leave (item) {
      this.$set(item, 'active', false)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .part {
    width :100%
    .main {
      width :90%
      margin: 1rem auto
      .system {
        margin-top :1rem
        font-size: 0;
        .item {
          box-sizing: none;
          display: inline-block
          width: calc(33.33333% - 1rem)
          padding: 1rem
          box-shadow: 0 0 4px #ccc;
        }
        .item + .item {
          margin-left: 1.5rem;
        }
      }
    }
  }
</style>
